import { Route, Routes } from 'react-router-dom'
import { history, HistoryRouter } from '@/utils/history'
import { AuthComponent } from '@/components/AuthComponent'
// import Layout from './pages/Layout'
// import Login from '@/pages/Login'
// import Layout from '@/pages/Layout'
// import Home from '@/pages/Home'
// import Article from './pages/Article'
// import Publish from './pages/Publish'

// 路由懒加载
// 导入必要组件
import { lazy, Suspense } from 'react'
// 按需导入路由组件
const Login = lazy(() => import('./pages/Login'))
const Layout = lazy(() => import('./pages/Layout'))
const Home = lazy(() => import('./pages/Home'))
const Article = lazy(() => import('./pages/Article'))
const Publish = lazy(() => import('@/pages/Publish'))

function App() {
  return (
    //  HistoryRouter 配置history参数,
    <HistoryRouter history={history}>
      <div className="App">
        {/* 路由懒加载 使用Suspense将Routes包裹*/}
        <Suspense
          fallback={
            <div
              style={{
                textAlign: 'center',
                marginTop: 200,
              }}
            >
              loading...
            </div>
          }
        >
          <Routes>
            {/* Layout路由需要鉴权 */}
            {/* 这里的 <Layout /> 不可以写死 需要判断是否登录*/}
            <Route
              path="/"
              element={
                <AuthComponent>
                  <Layout />
                </AuthComponent>
              }
            >
              {/* 二级路由 */}
              <Route index element={<Home />}></Route>
              <Route path="/publish" element={<Publish />}></Route>
              <Route path="/article" element={<Article />}></Route>
            </Route>
            {/* Login路由不需要鉴权 */}
            <Route path="/login" element={<Login />}></Route>
          </Routes>
        </Suspense>
      </div>
    </HistoryRouter>
  )
}

export default App
